<template>
  <div class="device">
    <a-button type="primary" @click="login()">新建设备</a-button>
    <div :style="{ display: 'flex', flexWrap: 'wrap' }">
      <!-- 使用 v-for 遍历 deviceList -->
      <!-- 定义单个设备信息的卡片组件 -->
      <a-card
        v-for="app in deviceList"
        :key="app.id"
        :style="{ width: '500px', margin: '16px', boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)' }"
        :title="`应用编号：${app.appId}`"
        class="device-card"
      >
        <template #extra>
          <!-- 登录按钮 -->
          <a-button type="primary" @click="login(app.appId)">登录</a-button>
        </template>

        <!-- 设备信息展示区域 -->
        <div class="device-info">
          <p><strong>UUID:</strong> {{ app.uuid }}</p>
          <p><strong>微信ID:</strong> {{ app.wxId }}</p>
          <p><strong>昵称:</strong> {{ app.nickName }}</p>
          <p><strong>手机号:</strong> {{ app.mobile }}</p>
          <p><strong>微信号:</strong> {{ app.alias }}</p>
        </div>

        <!-- 功能按钮区域 -->
        <div class="action-buttons">
          <a-button type="dashed" @click="getUserInfo(app.appId)">获取用户信息</a-button>
          <a-button type="dashed" @click="checkLogin(app.appId)">查看在线状态</a-button>
          <a-button type="dashed" @click="toMonitor(app.wxId,app.nickName)">监控大屏</a-button>
          <a-button type="dashed" @click="logout(app.appId)">退出登录</a-button>
        </div>
      </a-card>
    </div>
  </div>
  <div>
    <a-modal v-model:visible="visible"  @ok="handleOk" @cancel="handleCancel">
      <template #title>
        登录二维码
      </template>
      <div>
        <img :src="qrCodeUrl" alt="二维码" style="width: 100%" />
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from "vue";
  import { WxDevice, WxDeviceControllerService } from "../../generated";
  import router from '@/router'

  
  //前往监控屏幕页
  const toMonitor = async (wxId: string = "", nickName: string = "") => {
    if (!wxId) {
      alert("微信Id不能为空");
      return;
    }
    router.push({
      name: 'monitor',
      query: {
        deviceWxId: wxId,
        deviceWxName: nickName,
      }
    });
  };
  //登录信息
  const loginInfo= reactive({
    appId:"",
    uuid:""
  });
  // 设备列表
  const deviceList = reactive<WxDevice[]>([]);
  //二维码
  const qrCodeUrl = ref("");
  const getDeviceList = async () => {
    deviceList.length=0
    const res = await WxDeviceControllerService.listAppUsingPost();
    deviceList.push(...res.data as WxDevice[]); // 假设 res.data 是一个 App 类型的数组
  };

  onMounted(() => {
    getDeviceList();
  });
  const visible = ref(false);

  //登录（获取登录二维码）
  const login = async (appId: string="") => {
    const res = await WxDeviceControllerService.getLoginQrCodeUsingPost(appId);
    if(res.code==0){
      qrCodeUrl.value = res.data.qrImgBase64;
      loginInfo.appId=res.data.appId;
      loginInfo.uuid=res.data.uuid;
      visible.value = true;
      getDeviceList();
    }else {
      alert("获取登录二维码失败")
    }
    
    
  };
  //检测是否在线
  const checkLogin = async (appId: string="") => {
    const res = await WxDeviceControllerService.checkIsOnlineUsingPost(appId);
    if(res.code==0){
      alert("在线")
    }
  };
  //退出登录
  const logout = async (appId: string="") => {
    const res = await WxDeviceControllerService.logoutUsingPost(appId);
    checkLogin(appId)
  };
  
  //检测是否登录成功
  const checkLoginSuccess = async (appId: string="", uuid: string="",captchCode="") => {
    const res = await WxDeviceControllerService.checkLoginUsingPost(appId, captchCode, uuid);
    if(res.code==0){
      alert("登录成功")
    }else {
      alert(res.message)
    }
  };
  //获取用户信息
  const getUserInfo = async (appId: string="") => {
    const res = await WxDeviceControllerService.getUserInfoUsingPost(appId);
    getDeviceList();
  };
  const handleOk = () => {
    visible.value = false;
    checkLoginSuccess(loginInfo.appId,loginInfo.uuid,"")
  };
  const handleCancel = () => {
    visible.value = false;
  };

</script>
<style>
    /* 设备卡片的样式 */
    .device-card {
        transition: box-shadow 0.3s;
    }

    .device-card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
    }

    /* 设备信息区域的样式 */
    .device-info {
        margin-bottom: 16px;
    }

    /* 功能按钮区域的样式 */
    .action-buttons {
        display: flex;
        justify-content: space-between;
    }
</style>